<template>
    <div class="accordion">
        <form action="">
            <label for="item1">
                <p class="accordion-title">标题一</p>
                <input type="checkbox" name="accordion" id="item1">
                <div class="panel">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                </div>
            </label>
            <label for="item2">
                <p class="accordion-title">标题二</p>
                <input type="checkbox" name="accordion" id="item2">
                <div class="panel">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                </div>
            </label>
            <label for="item3">
                <p class="accordion-title">标题三</p>
                <input type="checkbox" name="accordion" id="item3">
                <div class="panel">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quia doloremque veniam voluptates!
                    Nulla asperiores, eos obcaecati labo
                </div>
            </label>
        </form>
    </div>
</template>

<script setup>

</script>

<style scoped>
.accordion-title {
    display: block;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.accordion-title:hover {
    background-color: #ddd;
}

.accordion input {
    display: none;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
}

.accordion input:checked~.panel {
    max-height: 500px;
    /* 或者设置为一个足够大的值以容纳所有内容 */
    transition: all .5s ease;
}
</style>